<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<script src="./js/index.global.js"></script>

		<script>

            let events = [];

            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    locale: 'zh', // 设置为中文
                    buttonText: {
                        today: '今天',
                        month: '月',
                        week: '周',
                        day: '日'
                    },
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
                    },
                    initialDate: new Date().toISOString().slice(0, 10),
                    navLinks: true, // can click day/week names to navigate views
                    selectable: true,
                    selectMirror: true,
                    select: function (arg) {
                        var title = prompt('事件标题:');
                        if (title) {
                            let newEvent = {
                                title: title,
                                allDay: arg.allDay,
                                start: arg.start,
                                end: arg.end
                            };

                            calendar.addEvent(newEvent);
            
                            addEvent(newEvent);
                        }
                        calendar.unselect()
                    },
                    eventClick: function (arg) {
                        if (confirm('你确定删除这个事件吗？')) {
                            arg.event.remove();
                            removeEvent(arg.event);
                        }
                    },
                    editable: true,
                    dayMaxEvents: true, // allow "more" link when too many events
                    events: events
                });

                calendar.render();
            });

		</script>


		<style>
            body {
                margin: 40px 10px;
                padding: 0;
                font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
                font-size: 14px;
            }

            #calendar {
                max-width: 1100px;
                margin: 0 auto;
            }

		</style>
	</head>
	<body>

		<div id="calendar"></div>

	</body>

    <script src="./js/fullcalendar.js"></script>

</html>
